<script setup>
import { deleteImageListAPI, getImageListAPI } from '@/api/image';
import { ref, onMounted, computed } from 'vue'
import { showPrompt, toast } from '@/composables/util';
import { updateImageClassAPI } from '@/api/image_class';
import UploadFile from './UploadFile.vue';

const props = defineProps({
  openChoose: {
    type: Boolean,
    default: false
  },
  limit: {
    type: Number,
    default: 1
  }
})
// 分页
const loading = ref(false)
const total = ref(0)
const currentPage = ref(1)
const limit = ref(10)
const imageList = ref([])
const image_class_id = ref(0)
const handleCurrentChange = (val) => {
  currentPage.value = val
  getImageList()
}

// 根据分类id重新加载图片列表
const loadData = (id) => {
  currentPage.value = 1
  image_class_id.value = id
  getImageList()
}
const getImageList = async () => {
  loading.value = true
  const res = await getImageListAPI(image_class_id.value, currentPage.value)
  loading.value = false
  total.value = res.totalCount
  imageList.value = res.list.map(o => {
    o.checked = false
    return o
  })
}

// 重命名
const handleEdit = async (item) => {
  console.log(item);

  try {
    const { value } = await showPrompt('重命名', item.name)
    loading.value = true
    const res = await updateImageClassAPI(item.id, value)
    loading.value = false
    toast('修改成功')
    getImageList()
    console.log(res);
  } catch (error) {
    console.log(error);
    toast('已取消', 'info')
  }


}
const handleDelete = async (id) => {
  loading.value = true
  const res = await deleteImageListAPI([id])
  loading.value = false
  console.log(res);
  getImageList(1)

}
const drawer = ref(false)
const openUploadFileDrawer = () => {
  drawer.value = true
}
// 上传成功
const handleUploadSuccess = () => {
  getImageList(1)
}
// 选中的图片
const emit = defineEmits(['choose'])
const checkedImage = computed(() => imageList.value.filter(o => o.checked))
const handleChooseChange = (item) => {
  if (item.checked && checkedImage.value.length > props.limit) {
    item.checked = false
    return toast(`最多只能选${props.limit}张`, 'error')
  }
  emit('choose', checkedImage.value)
}
defineExpose({
  loadData,
  openUploadFileDrawer
})
</script>
<template>
  <el-main class="image-main" v-loading="loading">
    <div class="top p-3">
      <!-- <div v-for="(item, index) in imageList" :key="index">{{ item.url }}</div> -->
      <el-row :gutter="10">
        <el-col :span="6" v-for="(item, index) in imageList" :key="index">
          <el-card :body-style="{ 'padding': 0 }" shadow="hover" class="relative mb-3"
            :class="{ 'border-blue-500': item.checked }">
            <el-image :preview-src-list="[item.url]" :initial-index="4" :src="item.url" fit="cover" class="h-[150px]"
              style="width: 100%;"></el-image>
            <div class="image-title">{{ item.name }}</div>
            <div class="flex items-center justify-center p-2">
              <el-checkbox v-if="openChoose" v-model="item.checked" @change="handleChooseChange(item)"></el-checkbox>
              <el-button type="primary" size="small" text @click="handleEdit(item)">重命名</el-button>
              <el-popconfirm title="是否要删除该图片？" confirm-button-text="确认" cancel-button-text="取消"
                @confirm="handleDelete(item.id)">
                <template #reference>
                  <el-button class="!m-0" type="primary" size="small" text>删除</el-button>
                </template>
              </el-popconfirm>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="bottom">
      <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="limit" background
        layout="prev,pager, next" :total="total" />
    </div>
  </el-main>
  <!-- 上传图片 -->
  <el-drawer v-model="drawer" title="上传图片">
    <UploadFile :data="{ image_class_id }" @success="handleUploadSuccess"></UploadFile>
  </el-drawer>
</template>
<style scoped>
.image-main {
  position: relative;
}

.image-main .top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 50px;
  overflow-y: auto;
}

.image-main .bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  @apply flex items-center justify-center;
}

.image-title {
  position: absolute;
  top: 122px;
  left: -1px;
  right: -1px;
  @apply text-sm truncate text-gray-100 bg-opacity-50 bg-gray-800 px-2 py-1;
}
</style>
